<script>
export default {
  name: "myPersonalAndVehicle",
  data() {
    return {
      isDisabled: true,
      updateMsg:"修改信息",
      vehicle: {
        id: "",
        vehicleNumber: "",
        vehicleType: "",
        capacity: "",
        driver: {
          id:0,
          name: "",
          phone: "",
          licenseNumber: ""
      },
        vehicleType: {
          id:0,
          type: "",
          description: ""
      }
      }
    }
  },
  methods: {
    updateDriver(){
      //修改el-input的disabled属性
      this.isDisabled=false;
    },
    getData(){
      this.isDisabled=true;
      const userInfo=JSON.parse(localStorage.getItem("userInfo"));
    console.log(userInfo.id);
    this.$axios.get("/vehicle/vehicle/findDriverAndVehicle/"+userInfo.id).then(res=>{
      this.vehicle=res.data.data;
    })
    }
  },
  created() {
    this.getData();
  }
}
</script>
<template>
  <el-button type="primary" @click="updateDriver">{{ this.updateMsg }}</el-button>
  <el-button type="primary" @click="getData()">取消修改</el-button>
  <div id="baseForm">
    <el-form :inline="true" :model="vehicle" class="demo-form-inline">
      <h2>个人与车辆信息</h2>
      <!-- <template> -->
        <el-tag type="success">{{vehicle.driver.driverType==='other'?'外部车辆':'内部车辆'}}</el-tag>
      <!-- </template>   -->
    
      <el-row>
        <el-col :span="8">
          <el-form-item label="我的姓名">
            <el-input v-model="vehicle.driver.name" :disabled="isDisabled">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="我的电话">
            <el-input v-model="vehicle.driver.phone" :disabled="isDisabled">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驾驶证号">
            <el-input v-model="vehicle.driver.licenseNumber":disabled="isDisabled">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="车牌号码">
            <el-input v-model="vehicle.vehicleNumber" :disabled="isDisabled">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆类型">
            <el-input v-model="vehicle.vehicleType.type" :disabled="isDisabled"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆载重">
            <el-input v-model="vehicle.capacity":disabled="isDisabled">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<style>
#baseForm {
  border: black 1px solid;
  box-shadow: 0 0 30px black;
  background-color: skyblue;
  border-radius: 5px;
  padding: 20px;
  margin: 20px auto auto;
  width: 90%
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>